<!--
 作者：ex_baiyc
 日期：2016-11-10
 功能：柱图组件
 参数：'chartWidth', 'chartHeight', 'chartData'
 事件：将父组件中传递过来的 chartData 赋值给图表
-->
<template>
  <div class="chart-view">
    <div :id="chartContainerId" :style="{width: chartWidth, height: chartHeight}">
    </div>
  </div>
</template>

<script>
//  import Echarts from 'echarts/lib/echarts'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/tooltip'

  export default{
    props: ['chartWidth', 'chartHeight', 'chartData'],
    data () {
      return {
        myChart: {},
        chartContainerId: 'chart-view-container-' + new Date().getMilliseconds()
      }
    },
    events: {},
    ready: function () {
    },
    watch: {
      'chartData.series[0].data': function () {
        var dataOption = {
          color: this.chartData.colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: this.chartData.legend,
            top: 15
          },
          grid: {
            top: '15%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: this.chartData.splitNumber
            },
            splitNumber: this.chartData.splitNumber || 1,
            axisLabel: {
              textStyle: {
                color: '#999'
              }
            }
          },
          yAxis: {
            type: 'category',
            data: this.chartData.yAxisData,
            axisLabel: {
              textStyle: {
                color: '#999'
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(215,215,215,1)'
              }
            },
            axisTick: {
              show: false
            }
          },
          series: this.chartData.series
        }
        this.$nextTick(function () {
          var chartContainer = document.getElementById(this.chartContainerId)
          this.myChart = window.Echarts.init(chartContainer)
          this.myChart.setOption(dataOption)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .chart-view {
    position: relative;
  }
</style>
